<template>
    <div>
        <mt-swipe :auto="4000">
                <!-- 在组件中，使用 v-for循环的话，一定要使用 key  -->
                <!-- 将来,谁使用此 轮播图组件,谁为我们传递 lunbotuList -->
                <!-- 此时,lunbotuList 应该是 父组件向子组件传值来设置 -->
            <mt-swipe-item v-for="item in lunbotuList" :key='item.url'>
                <img :src="item.img" alt="" :full="{'full':isfull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>
    <!-- 分析,为什么商品评论中的 轮播图那么丑 -->
    <!-- 1. 首页中的图片,他的宽和高,都是使用了 100% -->
    <!-- 2.在商品详情页面中,轮播图的 图片,如果使用了 宽高 为100%的话,页面不好看 -->
    <!-- 3. 商品详情页面中的轮播图,期望是高度 100%,但是宽度自适应 -->
    <!-- 4. 经过分析,得到问题的原因:首页中的轮播图 和详情中的轮播图,分歧点是宽度到底是 100% ,还是 自适应 -->
    <!-- 5. 既然这两个轮播图其他方面都是没有冲突的,只有宽度有分歧,那么,我们可以定义一个属性,让 
            使用轮播图的 调用者,手动指定 是否为 100%的宽度 -->

</template>
<script>
export default {
    props:['lunbotuList','isfull']
}
</script>

<style lang="scss" scoped>
.mint-swipe {
    height:200px;

    .mui-grid-view.mui-grid-9{
        background-color: #fff;
        border:0;
    }
    .mint-swipe-item{

        text-align: center;
        
        // &:nth-child(1){
        //     background-color:lightcoral;
        // }
        // &:nth-child(2){
        //     background-color:lightyellow;
        // }
        // &:nth-child(3){
        //     background-color:cyan;
        // }
    }

    img{
        width:100%;  //因为照片大小原因,此处 开启width:100%,否则切换会有小问题;
        height:100%;
    }
}   



.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border:0;
}

.full{
    width: 100%;
}
</style>